<template>
  <!-- 保险信息 -->
  <el-form :model="detailForm" class="elForm" v-loading="loading">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">基础信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="合计费用:">
            <span>{{ format_thousand(detailForm.totalMoney) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车船税合计费用:">
            <span>{{format_thousand(detailForm.carTaxTotalMoney) }}</span>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="交强险合计费用:">
            <span>{{ format_thousand(detailForm.compulsoryTotalMoney) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商业险合计费用:">
            <span>{{ format_thousand(detailForm.commercialTotalMoney) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他保险合计费用:">
            <span>{{ format_thousand(detailForm.otherTotalMoney) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>

          <el-table :data="tableData" border>
            <el-table-column label="操作" fixed min-width="60">
              <template #default="{row}">
                <el-button type="text" @click="handlRoute(row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" show-overflow-tooltip min-width="140" fixed align="center"
                             label="记录时间"/>
            <el-table-column prop="insuranceStatus" show-overflow-tooltip min-width="100" fixed align="center"
                             label="保险状态">
                             <template slot-scope="{ row }">
              {{
                selectDictLabel(dict.type.insurance_status, row.insuranceStatus)
              }}
            </template>
            </el-table-column>
            <el-table-column prop="propertyRightName" show-overflow-tooltip min-width="120" fixed align="center"
                             label="车辆产权"/>
            <el-table-column prop="ascription" show-overflow-tooltip min-width="120" fixed align="center"
                             label="租车名称"/>
            <el-table-column prop="carTax" show-overflow-tooltip min-width="80" fixed label="车船税"/>

            <el-table-column align="center" label="交强险">
              <el-table-column prop="jqxPolicyCode" show-overflow-tooltip min-width="140" align="center"
                               label="保单号"/>
              <el-table-column prop="jqxCompany" show-overflow-tooltip min-width="140" align="center" label="保险公司"/>
              <el-table-column prop="jqxActualBeginTime" show-overflow-tooltip min-width="120" align="center"
                               label="开始时间"/>
              <el-table-column prop="jqxActualEndTime" show-overflow-tooltip min-width="120" align="center"
                               label="结束时间"/>
              <el-table-column prop="jqxAmount" show-overflow-tooltip min-width="120" align="center" label="费用/元"/>
            </el-table-column>

            <el-table-column label="商业险" align="center">
              <el-table-column prop="syxPolicyCode" align="center" label="保单号" show-overflow-tooltip
                               min-width="140"/>
              <el-table-column prop="syxCompany" align="center" label="保险公司" show-overflow-tooltip min-width="140"/>
              <el-table-column prop="insuranceProName" align="center" label="险种" show-overflow-tooltip
                               min-width="120"/>
              <el-table-column prop="syxActualBeginTime" align="center" label="开始时间" show-overflow-tooltip
                               min-width="120"/>
              <el-table-column prop="syxActualEndTime" align="center" label="结束时间" show-overflow-tooltip
                               min-width="120"/>
              <el-table-column prop="syxAmount" align="center" label="总费用/元" show-overflow-tooltip min-width="100"/>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>
    </el-card>

  </el-form>
</template>

<script>
import {getInsuranceMessage} from "@/api/zcwh/vehicleTabs.js";

export default {
  name: "index",//保险信息
  props: ['carId'],
  dicts:['insurance_status'],
  computed: {},
  data() {
    return {
      detailForm: {},
      tableData: [],
      loading: false,
    };
  },
  created() {
    this.handleList();
  },
  mounted() {
  },
  methods: {
    async handleList() {
      this.loading = true;
      try {
        const res = await getInsuranceMessage({carId: this.carId});
        if (res.code === 200) {
          const {data} = res;
          this.detailForm = data;
          this.tableData = data.vo;
        }
      } catch (error) {
        console.error('获取保险信息失败', error);
      } finally {
        this.loading = false;
      }
    },

    handlRoute(row) {
      this.$router.push({
        path: "/clgl/insurance/InsureManageDetails",
        query: {
          id: row.insuranceCode,
          carId:row.carId
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";
</style>


